{%extends 'base.html' %}
{% load staticfiles %}
{% load oauth_tags %}

{% block title %}
个人中心
{% endblock %}
{% block head %}
{#    <link rel='stylesheet' id='style-css' href='{% static 'comment/css/bootstrap.min.css' %}' type='text/css' media='all'/>#}
    <link rel="stylesheet" href="/static/fullcalendar/dist/fullcalendar.min.css">
    <link rel="stylesheet" href="/static/fullcalendar/dist/fullcalendar.print.min.css" media="print">
   <link rel="stylesheet" href="/static/layer/skin/layer.css">
{#       <script type='text/javascript' src='/static/js/jquery.min.js'></script>#}

{% endblock %}

<!--主要内容块-->
{% block main %}
<div class="container">
    <div class="row">
        <div class="card-header text-center bg-white py-2">
            <h3 class="my-1 text-info">个人资料</h3>
        </div>
        <hr>
        {% get_user_data request.session.uid as user %}
        {% if user %}
            <div class="card-body">
                <div class="col-md-3">
                    <ul class="list-group">
{#                            <li class="list-group-item border-0" id="profile-avatar">#}
{#                                <img class="avatar" src="/media/{{ user.avatar }}" alt="{{user.username}}">#}
{#                            </li>#}
                            <li class="list-group-item ml-5   border-0">
                                <span class="font-weight-bold">用户名：</span>
                                <span>{{ user.username }}</span>
                            </li>
                            <li class="list-group-item ml-5   border-0">
                                <span class="font-weight-bold">邮&emsp;箱：</span>
                                <span>{{ user.email }}</span>
                            </li>
                            <li class="list-group-item ml-5  border-0">
                                <span class="font-weight-bold">网&emsp;址：</span>
                                <a href="{{ user.link }}" target="_blank" ><span>{{ user.link }}</span></a>
                            </li>
                        </ul>
                </div>
                <div class="col-5" id="calendar"></div>
            </div>
            <hr>
            <div class="text-center mb-5" id="social-login">
                <div class="more-link mt-3">
                    <a class="btn btn-info btn-sm rounded-0 mx-3" href="/accounts/profile/change/">修改资料</a>
                    <a class="btn btn-info btn-sm rounded-0 mx-3" href="/">返回首页</a>
                </div>
            </div>
        {% endif %}

    </div>
</div>
{% endblock main %}

{% block addjs %}
        <script src="/static/layer/layer.js"></script>
        <script type='text/javascript' src='/static/moment.js'></script>
        <script src="/static/fullcalendar/dist/fullcalendar.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                // console.log(new Date(y, m, d+6, 16, 0));
                //初始化FullCalendar
                $('#calendar').fullCalendar({
                    buttonText: {
                        today: '今天',
                        month: '月',
                        week: '周',
                        day: '日',
                    },
                    allDayText: "全天",
                    timeFormat: 'HH:mm',
                    views: {
                        month: {titleFormat: 'YYYY年MMMM月'},
                        week: {titleFormat: 'YYYY年MMMM月'},
                        day: {titleFormat: 'YYYY年MMMM月D日'},
                    },
                    monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                    monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                    dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    dayNamesShort: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    //defaultView: 'agendaWeek',
                    contentHeight: 650,
                    eventLimit: true, // allow "more" link when too many events
                    // 新增内容：自定义按钮
                    customButtons: {
                        reportAddButton: {
                            text: '添加',
                            click: doCreate,
                        },

                    },
                    header: {
                        //日历头部左边：初始化切换按钮
                        left: 'prev,next today reportAddButton',
                        //日历头部中间：显示当前日期信息
                        center: 'title',
                        //日历头部右边：初始化视图
                        right: 'month,agendaWeek,agendaDay'
                    },
                    //设置是否显示周六和周日，设为false则不显示
                    weekends: true,
                    eventClick: function (calEvent, jsEvent, view) {
                        layer.open({
                            type: 2,
                            title: '任务详情',
                            shadeClose: false,
                            maxmin: true,
                            area: ['800px', '480px'],
                            content: "/accounts/plan_info/" + calEvent.id + '/',

                        });
                    },
                    events: [
                        {
                            id:1,
                            title: '日程管理',
                            start: new Date(y, m, d+1)
                        },
                        {
                            id:2,
                            title: '博客评论',
                            start: new Date(y, m, d+2),
                            end: new Date(y, m, d+4)
                        },
                        {
                            id: 3,
                            title: '博客投稿、发文',
                            start: new Date(y, m, d+6, 16, 0),
                            end: new Date(y, m, d+13),
                            allDay: false
                        },
                        {
                        id: 4,
                        title: '微信公众号、小程序管理后台',
                        start: "2019-08-25 00:00",
                        end: "2019-09-01 16:00",
                        allDay: false
                    },
                    ],
                });
            });

            function doCreate() {
                layer.open({
                    type: 2,
                    title: '计划任务',
                    shadeClose: false,
                    maxmin: true,
                    area: ['800px', '480px'],
                    content: "/accounts/create_plan/",
                    end: function () {
                        window.location.reload();
                    }
                });
            }

        </script>
{% endblock %}